<template>
    <el-card class="energy-cost">
        <div class="title-container">
            <span class="rect"></span>
            <h3>工业能耗</h3>
        </div>
        <el-divider></el-divider>
        <div class="content">
            <div class="gridBlock">
                <div class="gridBlockLeft">
                    <div>{{ computedIndexNum("能耗总额") }}</div>
                    <div>能耗总额（吨标煤）</div>
                </div>
                <div class="gridBlockRight">
                    <div class="item">
                        <div class="smallItem">
                            <div class="rank">排行</div>
                            <div class="itemNumTxt">{{ computedIndexNum("能耗总额排名") }}</div>
                        </div>
                        <div class="smallItem">
                            <div class="rank">占比</div>
                            <div class="itemNumTxt">{{ computedIndexNum("能耗总额占比") }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gridBlock">
                <div class="gridBlockLeft">
                    <div>{{ computedIndexNum("用水量") }}</div>
                    <div>用水量（吨）</div>
                </div>
                <div class="gridBlockRight">
                    <div class="item">
                        <div class="smallItem">
                            <div class="rank">排行</div>
                            <div class="itemNumTxt">{{ computedIndexNum("用水量排名") }}</div>
                        </div>
                        <div class="smallItem">
                            <div class="rank">占比</div>
                            <div class="itemNumTxt">{{ computedIndexNum("用水量占比") }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gridBlock">
                <div class="gridBlockLeft">
                    <div>{{ computedIndexNum("用电量") }}</div>
                    <div>用电量（万千瓦时）</div>
                </div>
                <div class="gridBlockRight">
                    <div class="item">
                        <div class="smallItem">
                            <div class="rank">排行</div>
                            <div class="itemNumTxt">{{ computedIndexNum("用电量排名") }}</div>
                        </div>
                        <div class="smallItem">
                            <div class="rank">占比</div>
                            <div class="itemNumTxt">{{ computedIndexNum("用电量占比") }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gridBlock">
                <div class="gridBlockLeft">
                    <div>{{ computedIndexNum("燃气量") }}</div>
                    <div>燃气量（万立方米）</div>
                </div>
                <div class="gridBlockRight">
                    <div class="item">
                        <div class="smallItem">
                            <div class="rank">排行</div>
                            <div class="itemNumTxt">{{ computedIndexNum("燃气量排名") }}</div>
                        </div>
                        <div class="smallItem">
                            <div class="rank">占比</div>
                            <div class="itemNumTxt">{{ computedIndexNum("燃气量占比") }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</template>


<script>
const wjApi = window.$api.enterpriseManagement.wjscms
export default {
    data() {
        return {
            info: []
        }
    },
    props: {
        unifiedSocialCreditCode: {
            type: String,
            default: ""
        }
    },
    methods: {
        computedIndexNum(name) {
            if (this.info.length !== 0) return this.info.find(i => i.SubtypeName === name)?.IndexNum === null ? "0" : this.info.find(i => i.SubtypeName === name).IndexNum
            return "--"
        },
        async init() {
            this.info = []
            if (this.unifiedSocialCreditCode) {
                let res = await wjApi.info(
                    `http://221.224.136.227/wjscms/cf/service/DBService/CXQYXQZLXX`,
                    {
                        UID: this.unifiedSocialCreditCode,
                        f: "list"
                    }
                )
                this.info = res.Data
            }
        }
    },
    mounted() {
        // this.init()
    }
}
</script>


<style scoped lang='scss'>
.energy-cost {
    width: 60.5%;

    .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 6px;

        .gridBlock {
            display: flex;

            .gridBlockLeft {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #666;
                width: 132px;
            }

            .gridBlockRight {
                padding: 4px 0 4px 10px;
                width: 122px;
            }

            .item {
                display: grid;
                -ms-grid-columns: 1fr;
                grid-template-columns: 1fr;
                grid-row-gap: 4px;

                .smallItem {
                    color: #666;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    height: 40px;
                    justify-content: space-between;
                    padding: 0 5px 0 10px;
                    background: #f9f9f9;

                    .rank {
                        font-size: 12px;
                    }

                    .itemNumTxt {
                        color: #111;
                        font-size: 20px;
                        font-family: BebasNeue;
                    }
                }
            }
        }
    }
}

::v-deep .el-divider--horizontal {
    margin: 5px 0;
}
</style>
</style>